<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Row>
      <Form  :label-width="0" inline>
        <div class='main_item'>
        <div @click="dataShow('financialTradeData')" id="moxx" class="main_item_title">
            <span style="font-weight:bold;" icon="md-arrow-dropdown">金融交易</span>
            <span style="float:right">
                <Icon type="md-arrow-dropdown" id="financialTradeData_icon"></Icon>
            </span>
        </div>
        <div id="financialTradeData" class="main_item_content_block">
            <div style="margin:30px 10px 10px 10px;">
              <Table border :columns="financialTradeColumns" :data="financialTradeData" style="width: 100%;"></Table>
              <div style="text-align:center">
                <Page :total="financialTradeCondition.total" :current="financialTradeCondition.pageNum" :page-size="financialTradeCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChangeFinancial" @on-page-size-change="sizeChangeFinancial"></Page>
              </div>
            </div>
        </div>
        </div>
        <div class='main_item'>
        <div @click="dataShow('disFinancialTradeData')" id="moxx" class="main_item_title">
            <span style="font-weight:bold;" icon="md-arrow-dropdown">非金融交易</span>
            <span style="float:right">
                <Icon type="md-arrow-dropdown" id="disFinancialTradeData_icon"></Icon>
            </span>
        </div>
        <div id="disFinancialTradeData" class="main_item_content_block">
            <div style="margin:30px 10px 10px 10px;">
              <Table border :columns="disFinancialTradeColumns" :data="disFinancialTradeData" style="width: 100%;"></Table>
              <div style="text-align:center">
                <Page :total="disFinancialCondition.total" :current="disFinancialCondition.pageNum" :page-size="disFinancialCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChangeUnFinancial" @on-page-size-change="sizeChangeUnFinancial"></Page>
              </div>
            </div>
        </div>
        </div>
        <Modal v-model="modal1" title="详情信息" style="height:400px;width: 760px">
            <div style="height:400px;overflow: auto;">
              <Form  :label-width="120" inline>
              <FormItem label="状态" >
                <Input :disabled="true" v-model="financialTransDetailInfo.status" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              <FormItem label="客户编号" >
                <Input :disabled="true" v-model="financialTransDetailInfo.customerId" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              </br>

              <FormItem label="冲正标识" >
                <Input :disabled="true" v-model="financialTransDetailInfo.reversalFlag" placeholder="" style="width:130px">
                </Input>
              </FormItem>

              <FormItem label="入账日期" >
                {{this.$util.loanModularFormatTime(financialTransDetailInfo.reversalDate)}}
              </FormItem>
              </br>
              <FormItem label="交易金额" >
                <Input :disabled="true" v-model="financialTransDetailInfo.transAmt" placeholder="" style="width:130px">
                </Input>
              </FormItem>

              <FormItem label="来源代码" >
                <Input :disabled="true" v-model="financialTransDetailInfo.sourceCode" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              </br>
              <FormItem label="交易码" >
                <Input :disabled="true" v-model="financialTransDetailInfo.transCode" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              <FormItem label="入账金额" >
                <Input :disabled="true" v-model="financialTransDetailInfo.reversalAmt" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              </br>
              <FormItem label="参考号" >
                <Input :disabled="true" v-model="financialTransDetailInfo.transSeq" placeholder="" style="width:130px">
                </Input>
              </FormItem>

              <FormItem label="授权码" >
                <Input :disabled="true" v-model="financialTransDetailInfo.authorizationCode" placeholder="" style="width:130px">
                </Input>
              </FormItem>
               </br>
              <FormItem label="交易去向" >
                <Input :disabled="true" v-model="financialTransDetailInfo.destination" placeholder="" style="width:130px">
                </Input>
              </FormItem>

              <FormItem label="交易日期" >
                 {{this.$util.loanModularFormatTime(financialTransDetailInfo.transDate)}}
              </FormItem>
              </br>
              <FormItem label="合同账户ID" >
                <Input :disabled="true" v-model="financialTransDetailInfo.loanId" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              <FormItem label="交易描述" >
                <Input :disabled="true" v-model="financialTransDetailInfo.transDesc" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              </br>

              <FormItem label="最后更新用户" >
                <Input :disabled="true" v-model="financialTransDetailInfo.updatedBy" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              <FormItem label="最后更新时间" >
                {{this.$util.loanModularFormatTime(financialTransDetailInfo.updatedDate)}}
              </FormItem>
              </br>
              <FormItem label="交易ID" >
                 <Input :disabled="true" v-model="financialTransDetailInfo.id" placeholder="" style="width:130px">
                </Input>
              </FormItem>
              </Form>
            </div>
        </Modal>
      </Form>
    </Row>
</template>

<script>
export default {
  name: 'finance-trade',
  data () {
    return {
      modal1: false,
      comptParams: {
        loanId: '',
        custIdNumber: ''
      },
      financialTransDetailInfo: {
        status: '',
        customerId: '',
        reversalDate: '',
        reversalFlag: '',
        transAmt: '',
        sourceCode: '',
        transCode: '',
        reversalAmt: '',
        transSeq: '',
        authorizationCode: '',
        destination: '',
        transDate: '',
        loanId: '',
        transDesc: '',
        id: '',
        updatedBy: '',
        updatedDate: ''
      },
      financialTradeCondition: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        loanId: '',
        custIdNumber: ''
      },
      disFinancialCondition: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      financialTradeColumns: [
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '参考号',
          key: 'transSeq',
          align: 'center'
        },
        {
          title: '交易码',
          key: 'transCode',
          align: 'center'
        },
        {
          title: '交易描述',
          key: 'transDesc',
          align: 'center'
        },
        {
          title: '交易金额',
          key: 'transAmt',
          align: 'center'
        },
        {
          title: '交易时间',
          key: 'transDate',
          align: 'center'
        },
        {
          key: 'transAmt',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  var vm = this
                  var coditionParam = {
                    id: params.row.id
                  }
                  this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/manage/service/selectTransInfoDetail', coditionParam).then(re => {
                    var data = re.data
                    var code = data.code
                    if (code !== 'success') {
                      var message = data.message
                      this.$Message.warning(message)
                      return
                    }
                    vm.financialTransDetailInfo = data.data
                  }).catch(er => {
                    // console.info(er)
                  })
                  this.modal1 = true
                }
              }
            }, '查看')
          }
        }
      ],
      financialTradeData: [],
      disFinancialTradeColumns: [
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '参考号',
          key: 'referenceNumber',
          align: 'center'
        },
        {
          title: '交易码',
          key: 'tradeCode',
          align: 'center'
        },
        {
          title: '交易描述',
          key: 'tradeDesc',
          align: 'center'
        },
        {
          title: '交易金额',
          key: 'tradeAmount',
          align: 'center'
        },
        {
          title: '交易时间',
          key: 'tradeAmount',
          align: 'center'
        },
        {
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {

                }
              }
            }, '查看')
          }
        }
      ],
      disFinancialTradeData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.comptParams.loanId = this.accountTaskParams.loanId
    this.comptParams.custIdNumber = this.accountTaskParams.custCardNo
    this.financialTradeCondition.loanId = this.accountTaskParams.loanId
    this.financialTradeCondition.custIdNumber = this.accountTaskParams.custCardNo
    this.financialTradeQuery()
  },
  methods: {
    dataShow: function (tagId) {
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    },
    pageChangeFinancial: function (pageNum) {
      var vm = this
      vm.financialTradeCondition.pageNum = pageNum
      vm.financialTradeQuery()
    },
    sizeChangeFinancial: function (pageLength) {
      var vm = this
      vm.financialTradeCondition.pageSize = pageLength
      vm.financialTradeQuery()
    },
    pageChangeUnFinancial: function (pageNum) {
      var vm = this
      vm.disFinancialCondition.pageNum = pageNum
      vm.disFinancialTradeQuery()
    },
    sizeChangeUnFinancial: function (pageLength) {
      var vm = this
      vm.disFinancialCondition.pageSize = pageLength
      vm.disFinancialTradeQuery()
    },
    disFinancialTradeQuery () {
    },
    financialTradeQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/manage/service/selectTransList', vm.financialTradeCondition).then(re => {
        var data = re.data
        var code = data.code
        if (code !== 'success') {
          var message = data.message
          this.$Message.warning(message)
          return
        }
        vm.financialTradeData = data.data.list
        vm.financialTradeCondition.total = data.data.total
      }).catch(er => {
        // console.info(er)
      })
    }
  },
  props: {
    accountTaskParams: Object
  }
}
</script>
<style lang="less">
.row-col-style {
  background-color: #dcdcdc;
  text-align: center;
  height: 100%;
}
</style>
